<template>
    <Modal
            v-model="cropForm.showModal"
            title="添加作物"
            ok-text="保存"
            @on-ok="okModal"
            @on-cancel="cancelModal"
            width="500px"
            :mask-closable="false"
            :closable="false">
        <Form :model="cropForm" :label-width="100" >
            <FormItem label="作物名称 ：" class="inputClass">
                <Input v-model="cropForm.name" placeholder="作物名称"></Input>
            </FormItem>

            <FormItem label="分类：" class="inputClass">
                <Cascader :data="cropForm.classifyData" v-model="cropForm.classifyValues"></Cascader>
            </FormItem>

        </Form>
    </Modal>
</template>

<style>
    .inputClass {
        width: 400px;
    }

    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    #showPic .ivu-modal-wrap {
        z-index: 1001 !important;
    }

    #showPic .ivu-modal-mask {
        z-index: 1001 !important;
    }

    #lifeCycle .CodeMirror, .CodeMirror-scroll {
        min-height: 250px !important;
        height: 250px !important;
        overflow-y: auto;
    }
</style>
<script>
    import SimpleMDE from 'SimpleMDE';

    export default {
        props: {
            cropForm: Object,
            showModal: Boolean,
            okModal: {
                type: Function,
                default() {
                    return () => {
                        cropForm.showModal = false;
                    }
                }
            },
            cancelModal: {
                type: Function,
                default() {
                    return () => {
                        cropForm.showModal = false;
                    }
                }
            },
        },
        data() {
            return {
            }
        },
        methods: {
        },
        created(){
        }

    }

</script>

